import styles from "./Swiper.css"
import React, { useRef } from 'react'
import { Image, Space, Swiper, Toast } from 'antd-mobile'


const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
const imagesList = [
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.c2Lv9UxW6HDBiiEmsm2cIwHaFj?w=256&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.yd941rK8DDKyMZxThSVbPQHaE-?w=286&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse4-mm.cn.bing.net/th/id/OIP-C.XoueHqrn7dUgAHTAA0nQ4QHaFj?w=255&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse4-mm.cn.bing.net/th/id/OIP-C.RtzoyR6V1dtI1l_3og4kbwHaHa?w=191&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7"
]

const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div
            className={styles.content}
            style={{ background: color }}
            onClick={() => {
                Toast.show(`你点击了卡片 ${index + 1}`)
            }}
        >
            <Image src={imagesList[index]} fit='contain' />
        </div>
    </Swiper.Item>
))

export default () => {
    const ref = useRef(null)
    return (
        <>
            <Swiper
                style={{ height: "260px", margin: "10px 0", borderRadius: '5px' }}
                loop
                autoplay
                onIndexChange={i => {
                    console.log(i, 'onIndexChange1')
                }}
            >
                {items}
            </Swiper >
        </>
    )
}
